<template>
	<div :class="prefixCls" v-show="show">
        <slot name="label" v-if="slotShow"></slot>
        <slot></slot>
	</div>
</template>
<script>
const prefixCls = 'mj-tabs-tabpane';
export default {
    name: "mjTabPane",
    data(){
        return {
            prefixCls: prefixCls,
            show: false, //初始时将所有内容隐藏
            slotShow: true,
            currentName: this.name
        }
    },
    props:{
        //设置pane的标识
        name:{
            type:String
        },
        //label是设置标题
        label:{
            type:String,
            default:''
        },
        // 是否禁用该选项卡
        disabled: {
            type:Boolean,
            default:false
        },
        //是否可关闭
        closable: {
            type: Boolean,
            default: false
        }
    },
    methods:{
        updateNav:function(){
            //$parent 父链，通知父组件（tabs）进行更新。
            //说明：在业务中尽可能不要使用$parent来操作父组件，$parent适合标签页这样的独立组件
            this.$parent.updateNav();
        }
    },
    computed: {
        contentStyle () {
            return {
                visibility: this.$parent.currentValue !== this.currentName ? 'hidden' : 'visible'
            };
        }
    },
    //监听label
    watch:{
        label(){
            this.updateNav();
        },
        name (val) {
            this.currentName = val;
            this.$parent.updateNav();
        },
    },
    mounted(){
        //初始化tabs
        this.updateNav();
    },
    destroyed () {
        this.updateNav();
    }
  }
</script>